<template>
  <div class="user-page f-r">
    <div class="tree">
      <div class="tree-header f-r a-c">
        <div class="icon" />
        <span>地标性数字化系统</span>
      </div>
      <div class="tree-content">
        <el-tree
          :data="treeData"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="onNodeClick"
        >
          <span slot-scope="{ data }" class="custom-tree-node">
            <img src="@/assets/tree-icon.png" alt="" class="tree-node-icon">
            <span>{{ data.deptName }}</span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="content f-g f-c">
      <div class="content-header f-r a-c j-b">
        <div class="org-name">{{ deptDetail.deptName }}</div>
        <div class="button-list">
          <el-button plain type="primary" @click="onAddDept">新增部门</el-button>
          <el-button plain type="primary" :disabled="!deptDetail.deptId" @click="onEditDept">修改部门</el-button>
          <el-button plain type="primary" :disabled="!deptDetail.deptId" @click="onDelDept">删除部门</el-button>
        </div>
      </div>
      <UserList :dept-id="deptDetail.deptId" />
    </div>
    <!--  部门  -->
    <Dept ref="DeptRefs" @get-page="getDeptList" />
  </div>
</template>
<script>
import Dept from '@/views/user/dept';
import { http_dept } from '@/api';
import { listToTree } from '@/utils';
import UserList from '@/views/user/userList';
export default {
  name: 'UserPage',
  components: {
    Dept,
    UserList
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '桔都茶乡',
          children: [{
            id: 4,
            label: '某某街道',
            children: [{
              id: 9,
              label: '某某街道1'
            }, {
              id: 10,
              label: '某某街道2'
            }]
          }]
        }
      ],
      deptDetail: {}
    }
  },
  created() {
    this.getDeptList()
  },
  methods: {
    getDeptList() {
      http_dept.list().then(res => {
        this.treeData = listToTree(res.data || [], 'deptId')
        if (this.treeData && !this.deptDetail.detail) {
          this.deptDetail = this.treeData[0]
        }
      })
    },
    // 部门
    onAddDept() {
      this.$refs.DeptRefs.add()
    },
    onEditDept() {
      this.$refs.DeptRefs.edit(this.deptDetail)
    },
    onDelDept() {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          http_dept.deleteOne(this.deptDetail.deptId).then(res => {
            this.deptDetail = {}
            this.$message.success(res.msg)
            this.getDeptList()
          })
        })
        .catch(() => {

        })
    },
    onNodeClick(node) {
      console.log(node)
      this.deptDetail = node
    }
  }

}
</script>

<style lang="scss">
.user-page {
  background-color: #fff;
  height: 100%;
  width: 100%;
  .tree-node-icon {
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
  .tree {
    border-right: 1px solid #E8E8E8;
    flex-shrink: 0;
    width: 250px;
    .tree-header {
      height: 53px;
      padding-left: 18px;
      width: 100%;
      .icon {
        background-image: url('~@/assets/tree-icon.png');
        width: 17px;
        height: 17px;
        background-repeat:no-repeat;
        background-size: 100% 100%;
        margin-right: 7px;
      }
      font-size: 16px;
      line-height: 16px;

      font-weight: 400;
      color: #333333;
      border-bottom: 1px solid #E8E8E8;
    }
    .tree-content {
      padding: 15px 20px;
    }
  }
  .content {
    padding: 20px;
    .content-header {
      font-size: 20px;

      font-weight: 400;
      color: #333333;
      margin-bottom: 25px;
    }
    .button-list2 {
      height: 74px;
      border-top: 1px solid #E8E8E8;
    }
  }
}
</style>
